<template>
	<view class="main">
		
		<view class="content1">
			<view class="title">
			    信息采集一次性交通补贴
			</view>
			<!-- <view class="title1" style="margin-top: 20rpx;">
				<u-upload upload-text="选择图片" :before-upload="beforeUpload" width="330" multiple :maxCount="5"
					ref="uUpload2" :show-progress="false" height="200"
					action="https://recruit-api.xujiekeji.com/recruit-server/app/file/upload" :auto-upload="true"
					@on-remove="onRemove1" :file-list="fileList1" @on-success="successUpload1">
				</u-upload>
				
				<u-upload upload-text="选择图片" :before-upload="beforeUpload" width="330" multiple :maxCount="5"
					ref="uUpload2" :show-progress="false" height="200"
					action="https://recruit-api.xujiekeji.com/recruit-server/app/file/upload" :auto-upload="true"
					@on-remove="onRemove1" :file-list="fileList1" @on-success="successUpload1">
				</u-upload>
			</view> -->
			
			<view class="idCode">
				<u-upload :custom-btn="true" :maxCount="1" :show-progress="false" width="330" :file-list="fileList1" @on-remove="onRemove1" @on-success="successUpload1" action="https://recruit-api.xujiekeji.com/recruit-server/app/file/upload">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-icon name="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/v1/xj.png" size="60" ></u-icon>
					    <view class="station">资料</view>
					</view>
				</u-upload>
				<u-upload :custom-btn="true" :maxCount="1" :show-progress="false" width="330" :file-list="fileList1" @on-remove="onRemove1" @on-success="successUpload1" action="https://recruit-api.xujiekeji.com/recruit-server/app/file/upload">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-icon name="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/v1/xj.png" size="60" ></u-icon>
					    <view class="station">资料2</view>
					</view>
				</u-upload>
				<u-upload :custom-btn="true" :maxCount="1" :show-progress="false" width="330" :file-list="fileList1" @on-remove="onRemove1" @on-success="successUpload1" action="https://recruit-api.xujiekeji.com/recruit-server/app/file/upload">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-icon name="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/v1/xj.png" size="60" ></u-icon>
					    <view class="station">资料2</view>
					</view>
				</u-upload>
			</view>
			
		</view>
		
		<view class="content1">
			<view class="title">
			    身份信息:
			</view>
			<view class="idCode">
				<u-upload :custom-btn="true" :maxCount="1" :show-progress="false" width="330" :file-list="fileList1" @on-remove="onRemove1" @on-success="successUpload1" action="https://recruit-api.xujiekeji.com/recruit-server/app/file/upload">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-icon name="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/v1/xj.png" size="60" ></u-icon>
					    <view class="station">身份证正面</view>
					</view>
				</u-upload>
				<u-upload :custom-btn="true" :maxCount="1" :show-progress="false" width="330" :file-list="fileList1" @on-remove="onRemove1" @on-success="successUpload1" action="https://recruit-api.xujiekeji.com/recruit-server/app/file/upload">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-icon name="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/v1/xj.png" size="60" ></u-icon>
					    <view class="station">身份证反面</view>
					</view>
				</u-upload>
				
			</view>
			
		</view>
		
		<view class="content1">
			<view class="title1">
				<view class="title">人员类别:</view>
				<view class="one" @click="More()">
					更多
				<u-icon name="arrow-right"  size="28"></u-icon>
				</view>
			</view>
			
			<view class="idCode">
				<u-upload :custom-btn="true" :maxCount="1" :show-progress="false" width="330" :file-list="fileList1" @on-remove="onRemove1" @on-success="successUpload1" action="https://recruit-api.xujiekeji.com/recruit-server/app/file/upload">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-icon name="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/v1/xj.png" size="60" ></u-icon>
					    <view class="station">人员类别</view>
					</view>
				</u-upload>
				
				
			</view>
			
		</view>
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		
		
		
		<!-- 按钮 -->
		<view class="btns">
			<u-button class="sub" type="primary" @click="submit" >确认无误，下一步</u-button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				fileList1: [],
				fileList11: [],
				show: false,
				form:{
					imgUrls:'',
				},
				list: [
					{
						value: '城镇失业人员',
						label: '城镇失业人员'
					},
					{
						value: '高校毕业生',
						label: '高校毕业生'
					},
					{
						value: '残疾人',
						label: '残疾人'
					},
					{
						value: '复员退伍军人',
						label: '复员退伍军人'
					},
					
				],
			}
		},
		methods:{
			onRemove1(index) {
				this.fileList11.splice(index, 1);
				this.form.imgUrls = this.fileList11.toString()
			},
			successUpload1(data, index, lists, name) {
				let url = data.url;
				this.fileList11.push(url);
				console.log(this.fileList11,"shangchuantup")
				this.form.imgUrls = this.fileList11.toString()
			},
			More(){
				this.show=true
			},
			confirm(e){
				console.log(e,"comfirm");
			}
		}
	}
</script>

<style scoped lang="scss">
	.main{
		// background: #EDEDED;
		padding-bottom: 50px;
		
	}
	.content1{
		// background: white;
		// height: 200px;
		margin-top: 8px;
		.idCode{
			padding: 10px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.slot-btn {
			width: 340rpx;
			height: 190rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// background: rgb(244, 245, 246);
			border-radius: 10rpx;
			border: 1px dashed #bfbfbf;
			// margin-bottom: 10px;
			margin: 6px 0;
			position: relative;
			.station{
				position: absolute;
				top: 68%;
				// color: #bfbfbf;
				font-size: 10px;
			}
			
		}
	}
	.title1{
		display: flex;
		justify-content: space-between;
			border-bottom: 1px solid #EDEDED;
		.one{
			margin-right: 10px;
			color: #bfbfbf;
		}
		
	}
	.title {
	    font-size: 14px;
	    line-height: 1;
		border-bottom: 1px solid #EDEDED;
		height: 20px;
		display: flex;
	
	    &::before {
	        content: '';
	        display: inline-block;
	        vertical-align: middle;
	        width: 3px;
	        height: 14px;
	        background: rgb(30, 150, 230);
	        margin: -2px 10px 0 0;
	    }
	}
	.btns {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: white;
		.sub {
			display: block;
			width: 90%;
			height:30px;
			text-align: center;
			line-height: 30px;
			margin: 0 auto;
			color: white;
			background-color: #027FFD;
			border-radius: 4px;
		}
	}
	::v-deep .u-list-item{
		margin: 0rpx;
	}
</style>